<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<link rel="icon" href="images/logo.ico">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/style.css">
    <style>
        
    </style>
    </head>
<body>
    <header>
        <nav class="navbar nav-body navbar-default">
            <div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
                    <a class="navbar-brand logo" href="#">
                        <img src="images/logo.png" alt="">        
                    </a>
                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right nav-ul">
                        <li class="nav-li"><a href="#">HOME</a></li>
                        <li class="nav-li dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">PORTFOLIO<span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Portfolio Fiter</a></li>
                                <li><a href="#">Portfolio Single</a></li>
                            </ul>
                        </li>
                        <li class="nav-li"><a href="serviece.html">SERVIECE</a></li>
                        <li class="nav-li dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">BLOG <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Blog Grid</a></li>
                                <li><a href="#">Blog Single</a></li>
                                <li><a href="#">Blog Right Sidebar</a></li>
                                <li><a href="#">Blog Left Sidebar</a></li>
                                <li><a href="blog.html">Blog Full Width</a></li>
                            </ul>
                        </li>
                        <li class="nav-li dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">PAGES <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">About Us</a></li>
                                <li><a href="#">Coming Soon</a></li>
                                <li><a href="#">404 Page</a></li>
                                <li><a href="#">FAQ</a></li>
                                <li><a href="#">Pricing Table</a></li>
                            </ul>
                        </li>
                        <li class="nav-li"><a href="#">CONTACT</a></li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>
    </header>
    <section class="banner">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="block">
                        <!--fadeInUp css3动画 页面加载时文字向上滑动--><!--animated 定义一个css3动画-->
                        <h1 class="animated fadeInUp">A Digital Marketing <br>  &amp; Design Agency</h1>
                        <p class="animated fadeInUp">We love the Web and the work we do.We work closely with our clients to deliver <br>  the best possible solutions for their needs</p>
                        <a href="#" class="btn btn-main animated fadeInUp">Free Bootstrap Templates</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="about section">
        <div class="container">
            <div class="row">
                <div class="col-md-7 col-sm-12">
                    <div class="block">
                        <div class="section-title">
                            <h2>About Us</h2>
                            <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics</p>
                        </div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id</p>
                    </div>
                </div>
                <div class="col-md-5 col-sm-12">
                    <div class="block">
                        <img src="images/wrapper-img.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="great bg">
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-md-offset-6">
                    <h2 class="section-subtitle">WE BELIEVE IN GREAT IDEAS</h2>
                    <p>Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
                    <p>Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
                    <p>Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
                    <a href="#" class="btn btn-view-works">View Works</a>
                </div>
            </div>
        </div>
    </section>
    <section class="service">
        <div class="container">
            <div class="row">
                <div class="section-title">
                    <h2>Our Services</h2>
                    <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, <br> there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics</p>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6 col-md-3">
                    <div class="service-item">
                        <h4>Branding</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut </p>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3">
                    <h4>Web Design</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut</p>
                </div>
                <div class="col-sm-6 col-md-3">
                    <h4>App Design</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut</p>
                </div>
                <div class="col-sm-6 col-md-3">
                    <h4>Start Up</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut</p>
                </div>
                <div class="col-sm-6 col-md-3">
                    <h4>Logo Design</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut</p>
                </div>
                <div class="col-sm-6 col-md-3">
                    <h4>Development</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut</p>
                </div>
                <div class="col-sm-6 col-md-3">
                    <h4>Brand Identity</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut</p>
                </div>
                <div class="col-sm-6 col-md-3">
                    <h4>Brand Identity</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut</p>
                </div>
            </div>
        </div>
    </section>
    <section class="call-to-action bg-1 section-sm overly">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="block">
                        <h2>We design delightful digital experiences.</h2>
                        <p>Read more about what we do and our philosophy of design. Judge for yourself The work and results <br> we’ve achieved for other clients, and meet our highly experienced Team who just love to design.</p>
                        <a class="btn btn-main btn-solid-border" href="#">Tell Us Your Story</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="testimonial">
        <div class="container">
            <div class="row">
                <div class="section-title text-center">
                    <h2>Fun Facts About Us</h2>
                    <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia,  <br> there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics</p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="block">
                        <ul class="counter-box clearfix">
                            <li>
                                <div class="counter-item">
                                    <h4 class="counter">99</h4>
                                    <span>Cups Of Coffee</span>
                                </div>
                            </li>
                            <li>
                                <div class="counter-item">
                                    <h4 class="counter">45</h4>
                                    <span>Article Written</span>
                                </div>
                            </li>
                            <li>
                                <div class="counter-item">
                                    <h4 class="counter">125</h4>
                                    <span>Projects Completed</span>
                                </div>
                            </li>
                            <li>
                                <div class="counter-item">
                                    <h4 class="counter">200</h4>
                                    <span>Combined Projects</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-5 col-md-offset-1">
                    <div class="testimonial-carousel text-center">
                        <div class="over">
                            <div class="slick-track clearfix">
                                <div class="slick-slide">
                                    <p>"This Company created an e-commerce site with the tools to make our business a success, with innovative ideas we feel that our site has unique elements that make us stand out from the crowd."</p>
                                    <div class="user">
                                        <img src="images/item-img1.jpg" alt="">
                                        <p><span>Rose Ray</span> CEO-Themefisher</p>
                                    </div>
                                </div>
                                <div class="slick-slide">
                                    <p>"This Company created an e-commerce site with the tools to make our business a success, with innovative ideas we feel that our site has unique elements that make us stand out from the crowd."</p>
                                    <div class="user">
                                        <img src="images/item-img1.jpg" alt="">
                                        <p><span>Rose Ray</span> CEO-Themefisher</p>
                                    </div>
                                </div>
                                <div class="slick-slide">
                                    <p>"This Company created an e-commerce site with the tools to make our business a success, with innovative ideas we feel that our site has unique elements that make us stand out from the crowd."</p>
                                    <div class="user">
                                        <img src="images/item-img1.jpg" alt="">
                                        <p><span>Rose Ray</span> CEO-Themefisher</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <footer class="footer">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="footer-manu">
                        <ul>
                            <li><a href="">About Us</a></li>
                            <li><a href="">Contact us</a></li>
                            <li><a href="">How it works</a></li>
                            <li><a href="">Support</a></li>
                            <li><a href="">Terms</a></li>
                        </ul>
                    </div>
                    <p class="copyright">Copyright 2018 © Design & Developed by themefisher. All rights reserved.</p>
                </div>
            </div>
        </div>
    </footer>
    <div class="right-box"> <span>TOP</span>
        <div class="sanjiao"></div>
    </div>
    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/script.js"></script>
    <script src="js/top.js"></script>
</body>

</html>